<template>
  <div>
    <!-- 免责声明 -->
    <el-dialog
      center
      :width="width"
      title="用户信息收集免责声明"
      destroy-on-close
      append-to-body
      :show-close="false"
      :visible.sync="show"
      :before-close="cancel"
    >
      <div style="max-height: 450px; overflow: auto">
        <p>尊敬的用户:</p>

        <p>
          我们需要收集您的部分个人信息,以便为您提供更好的服务。我们会严格按照法律法规的要求,合理、正当、必要地收集和使用您的个人信息。
        </p>

        <p>我们收集的个人信息主要包括:</p>

        <ul>
          <li>姓名、邮箱、手机号等基础信息</li>
          <li>使用服务时产生的日志等数据信息</li>
        </ul>

        <p>这些信息将用于:</p>

        <ul>
          <li>完成服务注册,维护您的账户</li>
          <li>处理您的服务请求,改进我们的服务和用户体验</li>
          <li>符合法律法规的要求</li>
        </ul>

        <p>
          我们会在法律法规允许的范围内,谨慎地保存您的个人信息。我们会采取各种安全措施来保护您的个人信息,防止数据被泄露、损坏或丢失。
        </p>

        <p>
          当您同意本免责声明时,即表示您已知悉并同意我们按本声明收集、使用您的个人信息。我们会在获得您的授权同意后才会收集您的个人敏感信息。您有权要求我们提供个人信息的查阅、复制、补充、更正、删除等服务。
        </p>

        <p>如果您有任何疑问,可以通过 xxx@xxx.com 联系我们。</p>

        <p>再次感谢您的信任和支持!</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">
          <!-- 不同意 -->
          不同意
        </el-button>
        <el-button size="mini" @click="handleAgree" type="primary">
          <!-- 同意 -->
          同意
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    width() {
      const ua = navigator.userAgent;
      const isMobile = /Mobile|Android|iOS|iPhone|iPad|iPod|Opera Mini/i.test(
        ua
      );
      if (isMobile || window.matchMedia("(max-width: 768px)").matches) {
        // 手机端
        return "90%";
      } else {
        // 浏览器端
        return "700px";
      }
    },
  },
  watch: {},
  methods: {
    handleAgree() {
      this.$emit("agree");
      this.cancel();
    },
    cancel() {
      this.$emit("update:show", false);
    },
  },
};
</script>
<style scoped lang="scss"></style>
